<template>
  <div class="pipeline-editor">
    <!-- 操作按钮 -->
    <div class="control-bar">
      <el-button @click="addSerialTask" type="primary">添加串行任务</el-button>
      <el-button @click="addParallelTask" type="success">添加并行任务</el-button>
    </div>

    <!-- 流水线主体 -->
    <div class="pipeline-body">
      <!-- 串行任务区 -->
      <div class="serial-tasks" ref="serialContainer">
        <div 
          v-for="(task, index) in serialTasks"
          :key="task.id"
          class="task-node serial-node"
          :style="{ left: task.x + 'px', top: task.y + 'px' }"
        >
          <el-input v-model="task.name" placeholder="任务名称" />
          <div class="line-connector right"></div>
          <div 
            v-if="index > 0" 
            class="line-connector left"
            :style="leftConnectorStyle(task)"
          ></div>
        </div>
      </div>

      <!-- 并行任务区 -->
      <div 
        v-for="(group, gIndex) in parallelGroups"
        :key="gIndex"
        class="parallel-group"
        :style="{ left: group.x + 'px', top: group.y + 'px' }"
      >
        <div class="parallel-line"></div>
        <div class="parallel-tasks">
          <div
            v-for="(task, tIndex) in group.tasks"
            :key="task.id"
            class="task-node parallel-node"
          >
            <el-input v-model="task.name" placeholder="任务名称" />
            <div 
              v-if="tIndex > 0"
              class="parallel-connector"
            ></div>
          </div>
        </div>
        <div class="line-connector right"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'

// 任务ID生成器
let taskId = 0
const generateId = () => `task_${taskId++}`

// 串行任务数据
const serialTasks = ref([])
// 并行任务组数据
const parallelGroups = ref([])
// 容器引用
const serialContainer = ref(null)

// 添加串行任务
const addSerialTask = async () => {
  const newTask = {
    id: generateId(),
    name: '',
    x: serialTasks.value.length * 300,
    y: 0
  }
  serialTasks.value.push(newTask)
  
  await nextTick()
  updateConnectors()
}

// 添加并行任务组
const addParallelTask = () => {
  const baseX = serialTasks.value.length * 300
  parallelGroups.value.push({
    x: baseX,
    y: 100,
    tasks: [{
      id: generateId(),
      name: ''
    }]
  })
}

// 左侧连接线样式计算
const leftConnectorStyle = computed(() => (task) => {
  const prevTask = serialTasks.value.find(t => t.x === task.x - 300)
  return {
    height: `${task.y - prevTask?.y || 0}px`
  }
})

// 更新连接线位置
const updateConnectors = () => {
  if (!serialContainer.value) return
  
  const containerRect = serialContainer.value.getBoundingClientRect()
  serialTasks.value.forEach((task, index) => {
    if (index > 0) {
      const prevTask = serialTasks.value[index - 1]
      const currentEl = document.querySelector(`[data-task="${task.id}"]`)
      const prevEl = document.querySelector(`[data-task="${prevTask.id}"]`)
      
      if (currentEl && prevEl) {
        const prevRect = prevEl.getBoundingClientRect()
        const currentRect = currentEl.getBoundingClientRect()
        task.y = prevRect.top - containerRect.top + 50
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.pipeline-editor {
  position: relative;
  height: 600px;
  border: 1px solid #ebeef5;
  background: #f8f9fa;

  .control-bar {
    padding: 20px;
    background: white;
    border-bottom: 1px solid #ebeef5;
  }

  .pipeline-body {
    position: relative;
    height: calc(100% - 70px);
    overflow: auto;
  }

  .task-node {
    position: absolute;
    width: 240px;
    background: white;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    transition: all 0.3s;

    &.serial-node {
      margin: 40px 0;
    }

    &.parallel-node {
      margin: 20px;
    }
  }

  .line-connector {
    position: absolute;
    background: #409eff;

    &.right {
      right: -20px;
      top: 50%;
      width: 20px;
      height: 2px;
    }

    &.left {
      left: -20px;
      width: 2px;
      top: -50px;
    }
  }

  .parallel-group {
    position: absolute;

    .parallel-line {
      position: absolute;
      left: -20px;
      top: 50%;
      width: 20px;
      height: 2px;
      background: #409eff;
    }

    .parallel-tasks {
      display: flex;
      flex-direction: column;
      
      .parallel-connector {
        width: 2px;
        height: 20px;
        background: #409eff;
        margin: 0 auto;
      }
    }
  }
}
</style>